import { useEffect, useState } from "react"

export default  function Expenses() {
    let [count, setCount] = useState(0)
    useEffect(() => {
        console.log("父组件 初始化")
        return () => {
            console.log("父组件 销毁")
        }
    })
    
    return (
        <div>
            <main style={{padding: "1rem 0"}}>
                <h1>Expenses</h1>
                <button onClick={() => setCount(count + 1)}>'父组件'{count}</button>
                <Child key={1}/>
            </main>
        </div>
    )
}


function Child() {

    let [count, setCount] = useState(0)
    useEffect(() => {
        console.log("子组件 初始化")
        return () => {
            console.log("子组件 销毁")
        }
    })
    return (
        <div>
            <main style={{padding: "1rem 0"}}>
                <h2>Child</h2>
                <button onClick={() => setCount(count + 1)}>{count}</button>
            </main>
        </div>
    )
}